<template>
  <div class="main">
    <div class="content">
      <div class="head">


        <el-button type="primary" class="btn" @click="add">新增</el-button>
      </div>
      <el-table
        ref="dataForm"
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column  type="index" align="center" label="序号" width="50" />
        <el-table-column
          
          prop="type_name"
          align="center"
          show-overflow-tooltip
          label="分类名称"
          min-width="140"
        />
        <el-table-column  align="center" prop="action" label="操作" width="180">
          <template #default="scope">
            <div class="action">
              <span @click="edit(scope.row,1)">编辑</span>
              <span @click="delOk(scope.row)">删除</span>
              <!-- <span>档案管理</span> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top: 5px; text-align: right"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="ruleForm.id ? '编辑分类' : '新增分类'"
      :visible.sync="isShowAdd"
      width="800px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        style="width: 100%"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col >
            <el-form-item label="分类名称" prop="type_name">
              <el-input :disabled="isDetail" v-model="ruleForm.type_name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <el-image-viewer
      v-if="showImg"
      :on-close="
        () => {
          showImg = false;
        }
      "
      :url-list="imgList"
    />
  </div>
</template>

<script>
import { projectTypeList, projectTypeSave, projectTypeDelete } from '@/api/project';
export default {
  name: 'projectType',
  components: {  },
  data() {
    return {
      tableHeight: 500,
      name: '',
      list: [],
      level: 0,
      Node: {},
      isTableLoading: false,
      tableData: [],
      total: 0,
      queryData: {
        page: 1,
        size: 10,
        type_name: '',
      },
      dialogVisible: false,
      isShowAdd: false,
      ruleForm: {
        type_name: '',
      },
      rules: {
        type_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
      },
      eduList: [],
      jobList: [],
      levelList: [],
      showImg: false,
      imgList: [],
      staffArr: [],
      isDetail:false
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
  },
  methods: {
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.type_name = '';
      this.search();
    },
    down() {},
    add() {
      this.isShowAdd = true;
      this.ruleForm = {
        type_name: '',
        sort:0,
      };
      this.isDetail = false;
      this.$refs['ruleForm'].resetFields();
    },
    edit(item) {
        this.ruleForm  = JSON.parse(JSON.stringify(item));
        this.isShowAdd = true;
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk(item) {
      this.$confirm('确定删除该分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        projectTypeDelete({
          id: item.id,
        }).then((res) => {
          this.$message.success('删除成功');
          this.dialogVisible = false;
          this.getList();
          this.item = null;
        });
      });
    },

    handleClose() {
      this.ruleForm = {
        type_name: '',
        sort:0,
      };
      this.isShowAdd = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          projectTypeSave(this.ruleForm).then((res) => {
            this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
            this.getList();
            this.$refs[formName].resetFields();
            this.isShowAdd = false;
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    getList() {
      this.isTableLoading = true;
      projectTypeList(this.queryData).then((res) => {
        this.isTableLoading = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
   
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: calc(-100px + 100vh);
  background: #fff;
  /* display: flex;
  align-items: flex-start; */
  overflow: hidden;
  padding: 25px 20px;
  position: relative;
}
.content {
  width: 100%;
  min-height: 70vh;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span,
.look {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.prompt {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}
</style>
